<!--  -->
<template>
   <div>
    <div v-show="showpage">
        <card>
            <span>姓名: </span><el-input style="width:200px;margin-right: 20px;" v-model="sname" placeholder="请输入姓名"></el-input>
            <span>手机号: </span><el-input style="width:200px;margin-right: 20px;" v-model="sphone" placeholder="请输入手机号"></el-input>
            <span>证件号码: </span> <el-input style="width:200px" v-model="sidNum" placeholder="请输入证件号"></el-input>
             <el-button type="primary" @click="search">查询</el-button>
             <el-button type="warning" @click="reset">重置</el-button>
        </card>
        <card>
            <Table :columns="columns" :data="data">
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>
                <template #action="{ row, index }">
                    <div style="text-align:left">
                        <Button type="primary"  style="margin-right: 5px" @click="view(row)">查看                       
                    </Button>
                    <Button type="error" v-if="!row.inBlacklist" @click="addBlack(row)">加入黑名单</Button>
                    <Button type="error" v-else disabled="disabled">已加入黑名单</Button>
                    </div>
                </template>
               
            </Table> 
            <!-- <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total">               
            </el-pagination>           -->
            <Modal
                title="加入黑名单备注"
                v-model="modal2"
                @on-ok="ok"
                
                class-name="vertical-center-modal">
               <div style="display: flex;">
                <p style="margin-right: 6px;">备注</p>
                <!-- <input name="txt" type="text" maxlength="" style="width:400px; height:200px" id="ipt" /> -->
               <textarea name="备注" id="ipt" maxlength="" cols="60" rows="10" style="padding:5px"></textarea>
               </div>
            </Modal>
        </card>
    </div>
    <div v-show="!showpage">
        <div style="font-size:16px">
         <span>黑名单管理/&nbsp;&nbsp;</span><span @click="todetail">检索名单/&nbsp;&nbsp;</span><span style="color:black">用户详情</span>
        </div>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">基本信息</div>
            <div class="contents">
                <div class="tub"><i class="el-icon-user"></i></div>
                <div style="flex:1;padding-left:8px;">
                    <p style=" margin-bottom: 8px; font-weight:550; color:black;">姓名:<span class="kb">{{detaildata.name}}</span></p>
                    <div  class="threef">
                        <div>当前状态:<span class="kb">{{detaildata.inBlacklist}}</span></div>
                        <div>数据来源:<span class="kb">{{openid}}</span></div>
                    </div>
                    <div class="threef">
                       <div>注册时间:<span class="kb">{{detaildata.gmtCreate}}</span></div><div>性别:<span class="kb">{{detaildata.gender}}</span></div><div>年龄:<span class="kb">{{detaildata.age}}</span></div>
                    </div>
                    <div class="threef">
                        <div>最近预约到馆:<span class="kb">{{detaildata.lastOrderTime}}</span></div><div>手机号码:<span class="kb">{{detaildata.phone}}</span></div><div>证件号码:<span class="kb">{{cardNum}}</span></div>
                    </div>
                    
                </div>
            </div>
        </card>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">交易统计</div>
            <div class="numcon">
                <div>
                    <div>预约次数</div>
                    <div style="margin-left:34px">{{detaildata.totalNum}}<span class="kb">次</span></div>
                </div>
                <div>
                    <div>核销次数</div>
                    <div style="margin-left:34px">{{detaildata.checkNum}}<span class="kb">次</span></div>
                </div>
                <div>
                    <div>未核销次数</div>
                    <div style="margin-left:34px">{{detaildata.noCheckNum}}<span class="kb">次</span></div>
                </div>
                <div>
                    <div>取消次数</div>
                    <div style="margin-left:34px">{{detaildata.cancelNum}}<span class="kb">次</span></div>
                </div>
            </div>

        </card>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">预约明细</div>
            <Table :columns="columns1" :data="data1">
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>
                <template #action="{ row, index }">
                    <Button type="primary"  @click="modal3 = true;details(row)">查看详情</Button>
                </template>
            </Table> 
            <el-pagination
                @current-change="handleCurrentChange1"
                @size-change="handleSizeChange1"
                :current-page="currentPage1"
                :page-size="pageSize1"
                :page-sizes="[5, 10, 20, 50]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total1">               
            </el-pagination>  
        </card>
        <Modal
            title="查看明细"
            style="padding:10px"
            v-model="modal3"
            class-name="vertical-center-modal">
            <div class="diobox">
                <div>预约到馆日期: <span style="font-weight:500">{{rowdetail.travelDate}}</span></div>
                <div>预约到馆场次: <span style="font-weight:500">{{rowdetail.sessionTime}}</span></div>
            </div>
            <div style="margin:8px 0px">
                <span class="cercle"></span><span>{{rowdetail.gmtCreate}}</span>              
                <div class="cercles">
                    <div class="newsbox" style="width:100%; display:flex"><div>操作: 提交预约信息</div><div>状态: 成功</div></div>
                </div>
            </div>
            <div style="margin:8px 0px">
                <span class="cercle"></span><span>{{rowdetail.gmtModified}}</span>              
                <div class="cercles">
                    <div class="newsbox" style="width:100%; display:flex"><div>操作: {{rowdetail.status}}</div><div>状态: 成功</div></div>
                </div>
            </div>
            <!-- <div class="footer">
                <Button type="info" @click="modal3=false">关闭</Button>
            </div> -->
        </Modal>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">黑名单明细</div>
            <Table :columns="columns2" :data="data2">
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>             
            </Table> 
            <el-pagination
                @current-change="handleCurrentChange2"
                @size-change="handleSizeChange2"
                :current-page="currentPage2"
                :page-size="pageSize2"
                :page-sizes="[5, 10, 20, 50]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total2">               
            </el-pagination>  
        </card>
    </div>
   </div>
    
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default {
    //import引入的组件需要注入到对象中才能使用
    components: { },
    data() {
    //这里存放数据
    return {
        modal3: false,
        showpage:true,
        sname:'',
        sphone:'',
        sidNum:'',
        modal2: false,
        columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '来源',
                        key: 'openid',
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '手机号码',
                        key: 'phone',
                        align: 'center'
                    },
                    {
                        title: '证件号码',
                        key: 'cardNum',
                        align: 'center'
                    },
                    {
                        title: '预约次数',
                        key: 'totalNum',
                        align: 'center'
                    },
                    {
                        title: '核销次数',
                        key: 'checkNum',
                        align: 'center'
                    },
                    {
                        title: '取消次数',
                        key: 'cancelNum',
                        align: 'center',
                    },                                     
                    {
                        title: '操作',
                        slot: 'action',
                        width:'230px',
                        align: "center",
                        // className: 'demo-table-info-column'
                        }
                    ],
        columns1:[
                    {
                        title: '预约到馆日期',
                        key: 'travelDate',
                        align: 'center'
                    },
                    {
                        title: '预约到馆场次',
                        key: 'sessionTime',
                        align: 'center'
                    },
                    {
                        title: '提交预约时间',
                        key: 'gmtCreate',
                        align: 'center'
                    },
                    {
                        title: '当前状态',
                        key: 'status',
                        align: 'center'
                    },
                    {
                        title: '操作时间',
                        key: 'gmtModified',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: "center"
                        }
                    ],
        total: 0,
        currentPage:1, // 当前页数
        pageSize: 10, // 当前每页显示多少条数据
        columns2:[  {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '加入时间',
                        key: 'gmtCreate',
                        align: 'center'
                    },
                    {
                        title: '拉入操作人',
                        key: 'operator',
                        align: 'center'
                    },
                    {
                        title: '拉入理由',
                        key: 'reason',
                        align: 'center'
                    },
                    {
                        title: '释放时间',
                        key: 'gmtModified',
                        align: 'center'
                    },
                    {
                        title: '释放理由',
                        key: 'removeReason',
                        align: 'center'
                    },
                    {
                        title: '释放操作人',
                        key: 'removeOperator',
                        align: 'center'
                    }
                   
                    ],          
        data: [],
        rows:[],
        openid:'',
        cardNum:'',
        detaildata:[],
        data1:[],
        total1: 0,
        currentPage1:1, // 当前页数
        pageSize1: 10, // 当前每页显示多少条数据
        data2:[],
        total2: 0,
        currentPage2:1, // 当前页数
        pageSize2: 10, // 当前每页显示多少条数据
        rowdetail:[],//查看明细弹框
        id:''
    };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        //查看进入详情页
        view(row){
            this.showpage=false
            console.log(row);
            this.openid=row.openid
            this.cardNum=row.cardNum
            console.log(this.openid,this.cardNum);
            this.viewtodetail()
            this.orderpage()
            this.blackpage()
        },
        viewtodetail(){
            this.$http(
                '/chongqing/stage/blacklist/findBaseTravelInfo',
                {
                cardNum:this.cardNum,
                openid:this.openid
                },
                'post',
                (res)=>{
                    console.log(res,"查看跳到详情页的数据");
                    this.detaildata=res.data.data

                }
            )
        },
        orderpage(){
            this.$http(
                '/chongqing/stage/blacklist/findBlacklistOrderPage',
                {
                    cardNum: this.cardNum,                   
                    openid: this.openid,
                    orders: [
                        {
                        "asc": true,
                        "column": ""
                        }
                    ],
                    size: this.pageSize1,
                    current: this.currentPage1,
                },
                'post',
                (res)=>{
                    console.log(res,"预约分页记录");
                    this.data1=res.data.data.records
                    this.total1=res.data.data.total
                    this.data1.map((item)=>{
                        if(item.status==1){
                            item.status="待使用"
                        }if(item.status==2){
                            item.status="已使用"
                        }if(item.status==3){
                            item.status="已取消"
                        }if(item.status==4){
                            item.status="已过期"
                        }
                    })
                 
                }
            )
        },
        handleSizeChange1(pageSize) {
        // console.log(`每页 ${val} 条`);
        this.pageSize1 = pageSize;
        this.currentPage1=1;
        this.orderpage();
      },
      handleCurrentChange1(currentPage) {
        console.log(`当前页: ${currentPage}`);
          this.currentPage1 = currentPage;
          this.orderpage();
      },
      blackpage(){
        this.$http(
            '/chongqing/stage/blacklist/findTravelBlacklistPage',
            {
                cardNum: this.cardNum,                   
                openid: this.openid,
                orders: [
                    {
                    "asc": true,
                    "column": ""
                    }
                ],
                size: this.pageSize2,
                current: this.currentPage2,
            },
            'post',
            (res)=>{
                console.log(res,"黑名单分页数据");
                this.data2=res.data.data.records
                this.total2=res.data.data.total
            }
        )

      },
      handleSizeChange2(pageSize) {
        // console.log(`每页 ${val} 条`);
        this.pageSize2 = pageSize;
        this.currentPage2=1;
        this.blackpage();
      },
      handleCurrentChange2(currentPage) {
        console.log(`当前页: ${currentPage}`);
          this.currentPage2 = currentPage;
          this.blackpage();
      },


        todetail(){
            this.showpage=true
        },
        addBlack(row){
            this.modal2=true
            console.log(row,"row")
            this.rows=row
           document.getElementById("ipt").value=''
        
           
            // this.$http(
            //     "/chongqing/stage/blacklist/saveBlacklist",
            //     {
            //         "cardNum": row.cardNum,
            //         "name": row.name,
            //         "operator":row.operator,
            //         "phone":row.phone,
            //         "reason":row.reason
            //     },
            //     "post",
            //     (res)=>{
            //         console.log("加入黑名单",res);
            //     }
            // )

        },
        ok () {
           console.log(this.rows,"00000000000000");
           var txt=document.getElementById("ipt").value
           console.log(txt);
           this.rows.reason=txt
           if(this.rows.reason==''){
                this.$Message.info('请备注理由');
            }
           if(this.rows.reason){
                this.$http(
                "/chongqing/stage/blacklist/saveBlacklist",
                {
                    "cardNum": this.rows.cardNum,
                    "name": this.rows.name,
                    "operator":this.rows.operator,
                    "phone":this.rows.phone,
                    "reason":this.rows.reason
                },
                "post",
                (res)=>{
                    console.log("加入黑名单",res);
                    this.$Message.info('添加黑名单成功');
                }
            )
                this.$Message.info('备注成功');
            }
            txt=''
             
            },
        cancel () {
            this.$Message.info('已经取消');
        },
        getlistdata(){
            this.$http(
            '/chongqing/stage/blacklist/findBlacklistTravelInfo',
            { cardNum: this.sidNum,
                name: this.sname,
                phone: this.sphone,
                // size: this.pageSize,
                // current: this.currentPage
            },
            'post',
            (res)=>{
                console.log(res,"检索名单");
                this.data=res.data.data
                // this.total=this.data.length  
            }
           )
        },
        search(){
           console.log(this.sname);
           this.getlistdata()
        },
        reset(){
            this.sname='',
            this.sphone='',
            this.sidNum='',
            this.data=[]
            // this.getlistdata()
        },
        handleSizeChange(pageSize) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = pageSize;
        this.currentPage=1;
        this.getlistdata();
      },
      handleCurrentChange(currentPage) {
        console.log(`当前页: ${currentPage}`);
          this.currentPage = currentPage;
          this.getlistdata();
      },
      details(row){
        console.log(row);
        this.id=row.id
        console.log(this.id);
        this.$http(
            '/chongqing/stage/blacklist/getTravelerInfoById',
            {
                id:this.id
            },
            'get',
            (res)=>{
                console.log(res);
                this.rowdetail=res.data.data
                console.log(this.rowdetail);
                if(this.rowdetail.status==1){
                    this.rowdetail.status="待使用"
                }
                if(this.rowdetail.status==2){
                    this.rowdetail.status="已使用"
                }
                if(this.rowdetail.status==3){
                    this.rowdetail.status="已取消"
                }
                if(this.rowdetail.status==4){
                    this.rowdetail.status="已过期"
                }
                               
            }
        )
        

      }
       
            
    
    },
    beforeCreate() {}, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    
    },
    beforeMount() {}, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        // this.getlistdata()
    
    },
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
    </script>
    <style lang="less" scoped>
        /deep/.demo-table-info-column{
        // width: 20% !important;
       
        background-color: skyblue;

        }
        .vertical-center-modal{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .vertical-center-modal .ivu-modal{
            top: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .news{
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            padding-left: 8px;
            border-left: 8px solid blue;
        }
        .contents{
            display:flex; 
            justify-content:start; 
            width: 100%;
            margin-top: 10px;
        }
        .tub{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            border-radius: 25px;
            text-align: center;
            line-height: 50px;
        }
        .el-icon-user{
            font-size: 26px;
            margin-top: 10px;
        }
        .threef{
            display: flex;
            margin-bottom: 8px;
            align-items: center;
            div{
                width: 33%;
            }
        }
        .numcon{
            display: flex;
            div{
                width: 20%;
                margin-left: 20px;
                font-weight: 550; 
                color: rgb(56, 53, 53);
                margin-top: 10px;
                div{
                    width: 100%;
                    margin-top: 10px;
                    span{
                        font-weight: normal;
                        color: #515A6E;
                    }
                }
            }
        }
        .diobox{
            background-color: #E6F3FC;
            display: flex;
            justify-content: space-between;
        }
        .cercle{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 2px solid skyblue;
            margin-right: 8px;
        }
        .cercles{
            width: 100%;
            height: 30px;
            border-left: 1px  dashed #DEDEDE;
            margin-left: 4px;
        }
        .newsbox{
            width: 100%;
            display: flex;
            div{
                width: 40%;
                font-size: 12px;
                margin-left: 8px;
            }
        }
        // .ivu-modal-footer{
        //     display: none;
        // }
        .footer{
            text-align: right;
        }
        .kb{
            margin-left: 10px;
        }
    </style>